<template>
  <div class="bokerecom">
    <aside>
      首先在博客管理中，设置推荐等级。然后通过拖动列表，调节推荐博客的显示的优先级<br />
      一级推荐：轮播图<br />
      二级推荐：轮播图右侧 <br />
      四级推荐：推荐文章<br />
    </aside>
    <!-- 推荐列表 -->
    <div class="tuijian">
      <ul>
        <li class="onetext">
          <el-button type="primary">一级推荐</el-button>
          <el-card shadow="always">
            总是显示
          </el-card>
        </li>
        <li>
          <el-button type="warning">二级推荐</el-button>
          <el-card shadow="always">
            总是显示
          </el-card>
        </li>
        <li>
          <el-button type="danger">三级推荐</el-button>
          <el-card shadow="always">
            总是显示
          </el-card>
        </li>
        <li>
          <el-button type="success">四级推荐</el-button>
          <el-card shadow="always">
            总是显示
          </el-card>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.bokerecom {
  aside {
    height: 200px;
    background: rgb(238, 241, 246);
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    display: block;
    line-height: 46px;
    font-size: 17px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    color: rgb(44, 62, 80);
    -webkit-font-smoothing: antialiased;
  }
  .el-button {
    width: 100%;
    height: 60px;
    font-size: 16px;
  }
  .onebtn {
    margin-left: 30px;
  }
  .el-col {
    text-align: right;
  }
  .el-card {
    margin: 10px auto;
    width: 315px;
    height: 60px;
  }
  .tuijlist {
    background-color: #f0f0f0;
  }
  .tuijian ul li {
    float: left;
    margin-left: 20px;
    list-style: none;
    width: 337px;
    height: 480px;
    background-color: #f0f0f0;
  }
  .tuijian ul {
    padding: 0;
  }
  .onetext {
    margin-left: 30px;
  }
}
</style>
